<template>
	<view class="search">
		<view class="search_top">
			<view class="search_ipt">
				<u-icon name="search" color="#71797F" size="25"></u-icon>
				<input type="text" :placeholder="placeholder" class="ipt" v-model="searchValue">
			</view>
			<view class="search_btn" @click="search(searchValue)">
				搜索
			</view>
		</view>
		<view class="search_bottom" v-if="!historyList.length">
			<view class="title">热门搜索</view>
			<view class="search_list">
				<view class="hot_item" v-for="(item,i) in hotList" :key="i" @click="search(item)">{{item}}</view>
			</view>
		</view>
		<view class="search_bottom" v-else>
			<view class="title">
				历史搜索
				<u-icon name="trash-fill" size="20px" color="#b7c4cc" @click="del"></u-icon>
			</view>
			<view class="search_list">
				<view class="hot_item" v-for="(item,i) in historyList" :key="i" @click="search(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholder: '爱情',
				searchValue: '',
				hotList: ['满天星', '蛋糕', '玫瑰', '康乃馨'],
				historyList: []
			}
		},
		onLoad() {
			this.getHistory()
		},
		methods: {
			getHistory() {
				this.historyList = uni.getStorageSync('history') || []
			},
			setHistory(name) {
				this.historyList.push(name)
				this.historyList = [...new Set(this.historyList)]
				uni.setStorageSync('history', this.historyList)
			},
			search(name) {
				if (name === '') {
					name = this.placeholder
				}
				this.setHistory(name)
				uni.navigateTo({
					url: `/classify/classify?name=${name}`
				})

			},
			del() {
				this.historyList = []
				uni.removeStorageSync('history')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		.search_top {
			padding: 5px 20rpx;
			background-color: #fff;
			border-bottom: 2px solid #f1f1f1;
			display: flex;
			align-items: center;

			.search_ipt {
				width: 77%;
				display: flex;
				align-items: center;
				color: #71797F;
				background-color: #F3F5F7;
				letter-spacing: 0.5px;
				padding-left: 20rpx;
				border-radius: 18px;

				.ipt {
					height: 36px;
					font-size: 14px;
				}
			}

			.search_btn {
				line-height: 36px;
				background-color: #ff734c;
				color: #fff;
				flex-grow: 1;
				margin-left: 20rpx;
				text-align: center;
				border-radius: 18px;
				font-size: 14px;
			}
		}

		.search_bottom {
			padding: 10px 30rpx;

			.title {
				font-size: 15px;
				line-height: 40px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-right: 20rpx;
			}

			.search_list {
				display: flex;
				flex-wrap: wrap;
				font-size: 13px;

				.hot_item {
					background-color: #E9ECF0;
					padding: 12rpx;
					margin: 0 20rpx 20rpx 0;
				}
			}
		}
	}
</style>